<template>
  <div class="home">
    <my-map
      :minZoom="10"
      :maxZoom="19"
      projection="EPSG:3857"
      :adapter="adapter"
      :zoom="10"
      :center="center"
      :extent="extent"
    >
      <my-map-cluster
        :data="clusterData"
        :style-creator="styleCreator"
      ></my-map-cluster>
    </my-map>
  </div>
</template>
<script>
import { MyMap, MyMapCluster } from "$ui/map";
import gisApi from '../../gisApi'
export default {
  data() {
    return {
      adapter({ TileLayer, XYZ }) {
        return new TileLayer({
          source: new XYZ({
            url: gisApi.layerConfig.tileUrl,
          }),
        });
      },
      data: null,
      extent: gisApi.mapConfig.extent,
      center: gisApi.mapConfig.center,
      clusterData: [
        { coordinate: [12731221.428514445, 3568153.2149517313] },
        { coordinate: [12731315.541590942, 3568148.915379825] },
        { coordinate: [12731129.644356782, 3568110.338526109] },
        { coordinate: [12731668.525442641, 3568112.249495554] },
        { coordinate: [12731293.02851203, 3567904.9140308164] },
        { coordinate: [12731669.480890915, 3567860.0073058573] },
        { coordinate: [12732024.913043283, 3568215.439476449] },
        { coordinate: [12732227.47113908, 3567806.5013641887] },
        { coordinate: [12731679.990982305, 3567691.845821761] },
        { coordinate: [12732775.488845764, 3567247.9139043577] },
        { coordinate: [12732975.658320876, 3567227.3714566506] },
        { coordinate: [12732775.011121627, 3567158.5781239043] },
        { coordinate: [12733143.819768524, 3567190.5860966956] },
        { coordinate: [12732162.559414268, 3567038.6675357823] },
        { coordinate: [12732423.400769647, 3566908.7246022765] },
        { coordinate: [12732325.943573164, 3566719.0652221986] },
        { coordinate: [12732244.251506474, 3566551.859208246] },
        { coordinate: [12732047.426158642, 3566431.9486347027] },
        { coordinate: [12732583.918529045, 3565387.1499952185] },
        { coordinate: [12732543.311372349, 3565112.4544193507] },
        { coordinate: [12732938.395255009, 3565073.758144623] },
        { coordinate: [12731522.55191893, 3568104.416686044] },
        { coordinate: [12731600.315983005, 3568100.435587784] },
        { coordinate: [12731511.404858379, 3568105.743721835] },
        { coordinate: [12731628.714454165, 3568102.558839582] },
        { coordinate: [12731542.988211792, 3568105.4783073873] },
        { coordinate: [12731645.435054103, 3568107.3361538495] },
      ],
      styleCreator: {
        fill: "red",
        radius: 10,
        strokeWidth: 1,
        strokeColor: "yellow",
        textFill: "#fff",
        scaleSeed: 0.8,
      },
    };
  },
  components: {
    MyMap,
    MyMapCluster,
  },
};
</script>
<style lang="scss" scoped>
.home {
  width: 100%;
  height: 100%;
  .my-map {
    width: 100%;
    height: 100% !important;
  }
}
</style>
